// 1. 初始化less文件 (保存自动在, 当前文件下生成css文件)
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 9.5同步-----------------------------
li {
  list-style: none;
}
/* 声明字体*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}
// 9.5同步-----------------------------

.box {
  // 3. 如下 ->输入 px 自动换算实现: 安装插件 "cssrem",
  // 并给其配置设置 ->Cssrem: font xxx 默认值为 80, 即可！
  width: 1rem;
  height: 1rem;
  // background-color: pink;
}

// 4. 设置一个背景图:
body {
  // 4.2 设置 background 背景, 并且显示在 top(x顶上)+center(y居中)位置:
  background: url(../images/bg.jpg) no-repeat top center;
  line-height: 1.15;
}

// 5.2同步 ->配置标题样式:
header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat;
  background-size: 100% 100%;

  // 5.3 配置[标题]样式:
  h1 {
    font-size: .475rem;
    line-height: 1rem; // 设置行高, 让其尽量往中间显示
    color: #fff;
    text-align: center; // 水平居中
  }
  // 5.4 标题-右侧时间显示:
  .showTime {
    position: absolute; // 5.5 时间采取 ->"定位"
    top: 0;
    right: .375rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: .25rem;
    line-height: .9375rem; // 5.6 加上行高, 让<右侧时间>偏下显示
  }
}

// 6.2 配置 mainbox 区域的样式:
.mainbox {
  display: flex;
  min-width: 12.8rem;
  max-width: 24rem;
  // background-color: pink;
  padding: .125rem .125rem 0 .125rem;

  // 6.3 mainbox 内部三列盒子排版: 3 5 3
  .column {
    flex: 3;
    // 6.end 使用 "nth-child(伪类选择器)", 单独处理第二个盒子占位大小:
    &:nth-child(2) {
      flex: 5;
      margin: 0 10px 15px 10px;
      overflow: hidden; // 18. 以 "中央" 模块为主, 超出部分, 则不让滚动条显示了~~~
    }

    // 7.2 设置 panel 盒子相关的样式:
    .panel {
      position: relative;
      height: 3.875rem;

      // 细节1: 当设置的像素值很小时, 可直接写上 值+px 即可:
      border: 1px solid rgba(25, 186, 139, 0.17);

      background: url('../images/line\(1\).png');
      padding: 0 .1875rem .5rem .1875rem;
      margin-bottom: .1875rem;

      // 7.3 ✨给四角设置边框:
      &::before {
        position: absolute;
        content: '';

        // 7.4 左上角, 单独设置 ->左+上 的边框即可:
        top: 0;
        left: 0;
        width: .125rem;
        height: .125rem;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
      }
      // 7.5 右上角, 单独设置 ->右+上 的边框即可:
      &::after {
        position: absolute;
        content: '';
        top: 0;
        right: 0;
        width: .125rem;
        height: .125rem;
        border-top: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
      }

      // 🔥细节2: 一个单独的 div 盒子最多只能使用一个 ::before 伪元素和一个 ::after 伪元素
      // 因此, 对于当前 panel 盒子下方的边框显示, 得单独设置一个 footer 类名, 然后再用俩伪元素:
      .panel-footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        &::before {
          position: absolute;
          content: '';   
          // 7.7 左下角, 单独设置 ->左+下 的边框即可:
          bottom: 0;
          left: 0;
          width: .125rem;
          height: .125rem;
          border-bottom: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }
        // 7.end 右下角:
        &::after {
          position: absolute;
          content: '';
          bottom: 0;
          right: 0;
          width: .125rem;
          height: .125rem;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }

      // 8.2 设置panel内部图表上方标题样式:
      h2 {
        margin-top: .125rem;
        height: .6rem;
        line-height: .6rem;
        font-size: .25rem;
        color: #fff;
        text-align: center;
        font-weight: 400;
      }
      // 8.6 给图表容器设置大小:
      .chart {
        height: 3rem;
      }
    }

    // 9.同步 ->数字模块样式:
    .no {
      background: rgba(101, 132, 226, 0.1);
      padding: 15px;
      // 9.3 hd 模块:
      .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);
        ul {
          display: flex;
          // 9.5 设置li样式
          li {
            flex: 1;
            position: relative;
            height: 1rem;
            text-align: center;
            line-height: 1rem;
            font-size: .875rem;
            color: #ffeb7b;
            font-family: 'electronicFont';
            // 9.end 设置中间 "竖线":
            &:nth-child(1)::after {
              content: ''; // 细节3: 伪元素(before/after)不能漏的属性
              position: absolute; // 细节4: "子绝父相", 父不能漏掉 [相对定位]
              top: 25%;
              right: 0;
              width: 1px;
              height: 50%;
              background: rgba(255, 255, 255, 0.2);
            }
          }
        }
        // 9.6 设置(左上+右下)边框:
        &::before {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          width: .125rem;
          height: .375rem;
          border-top: 2px solid #02a6b5;
          border-left: 2px solid #02a6b5;
        }
        &::after {
          position: absolute;
          content: '';
          bottom: 0;
          right: 0;
          width: .125rem;
          height: .375rem;
          border-bottom: 2px solid #02a6b5;
          border-right: 2px solid #02a6b5;
        }
      }
      // 10.2 bd 模块:
      .no-bd {
        ul {
          display: flex;
          // 10.end 配置内部li样式:
          li {
            flex: 1;
            height: .5rem;
            color: rgba(255, 255, 255, 0.7);
            font-size: .225rem;
            padding-top: .125rem;
            text-align: center;
            height: .5rem;
            line-height: .5rem;
          }
        }
      }
    }
    // 11.2 map 模块:
    .map {
      position: relative;
      height: 10.125rem;
      // .chart {
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   z-index: 5;
      //   height: 10.125rem;
      //   width: 100%;
      // }

      // 🔥11.end(补充1) 将map子模块公共部分抽离出来:
      .map1,
      .map2,
      .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 6.475rem;
        height: 6.475rem;
        background: url(../images/map.png) no-repeat;
        background-size: 100% 100%;
        opacity: 0.3;
      }

      // 11.3 球体图片模块:
      // .map1 {
      // }
      // 11.4 经纬球图片模块:
      .map2 {
        width: 8.0375rem;
        height: 8.0375rem;

        // 细节5: 抽离了公共样式后, 其内部子背景, 需用 "-image" ！！！
        background-image: url(../images/lbx.png);
        opacity: 0.6;

        // 11.5 经纬球旋转动画:
        animation: rotate 15s linear infinite;
        z-index: 2;
      }
      // 11.6 球体边缘线模块:
      .map3 {
        width: 7.075rem;
        height: 7.075rem;
        background-image: url(../images/jt.png);

        // 11.end 球体边缘线旋转动画:
        animation: rotate1 10s linear infinite;
      }

      // 11.5同步:
      @keyframes rotate {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }
      // 11.end同步:
      @keyframes rotate1 {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
      }
    }
  }
}

/* 17.end 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
}